<template>
  <uni-nav-bar title="加注机" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" v-for="item in fillList" :key='item.id'>{{item.fill_name}}</view>
  <view v-if="fillList.length<1" class="column fillings">
    <image :src="fillder1"></image>
    <text>暂无加注机</text>
  </view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { ref } from 'vue';
  import { fillder1 } from '@/utils/Static';
  import { toPublish } from '@mqtt';
  import { getFleetFillList } from '@/gql/fleet';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  /**
   * 车队加注机列表
   * @param {Array} fillList 加注机列表
   */
  const fillList = ref([])
  init()
  function init() {
    const payload = {
      query: getFleetFillList,
      variables: {
        fleet_id: Number(userInfo.getFleetAll.id)
      },
    };
    toPublish(
      'ql/driver/getFleetFillList',
      payload,
      (obj : any) => {
        const { getFleetFillList } = obj.data;
        fillList.value = getFleetFillList
      }
    );
  }
</script>

<style scoped lang="less">
  .fillings {
    width: 100%;
    height: 60vh;

    image {
      width: 352rpx;
      height: 252rpx;
    }

    text {
      font-size: 24rpx;
      color: #999999;
      margin-top: 20rpx;
    }
  }
</style>